<template>
  <div class="admin">
    <el-container>
      <el-aside width="200">
        <adminHeader></adminHeader>
      </el-aside>
      <el-main>
        <el-page-header content="低价卡券订单管理"></el-page-header>
  <!--        <div>-->
  <!--          <ve-line :data="countData" :settings="chartSettings" style="width:95%"></ve-line>-->
  <!--        </div>-->
        <div>
          <el-table :data="orders" height="600px">
            <el-table-column
              prop="user_name"
              label="用户名"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="time"
              label="下单时间"
              align="center"
              :formatter="timer"
            ></el-table-column>
            <el-table-column prop="order_price" label="订单总价" align="center">
              <template slot-scope="scope">
                <span>￥{{ scope.row.order_price }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="pay_state" label="状态" align="center">
              <template slot-scope="scope">
                <span
                  v-if="
                    scope.row.pay_state == 201 && scope.row.order_state == 201
                  "
                  >暂未付款</span
                >
                <div
                  v-if="
                    scope.row.pay_state == 200 && scope.row.order_state == 201
                  "
                >
                  <span>已付款</span>
                  <el-button type="text" @click="delivery(scope.row)"
                    >发货</el-button
                  >
                </div>
                <div v-if="scope.row.pay_state == 202">
                  <span>已发起退款</span>
                  <el-button size="mini" type="text" @click="refund(scope.row)"
                    >退款</el-button
                  >
                </div>
                <span
                  v-if="
                    scope.row.pay_state == 200 && scope.row.order_state == 200
                  "
                  >已发货</span
                >
                <span v-if="scope.row.order_state == 203">已取消</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="primary" size="small" @click="checkDetails(scope.row)">查看详情</el-button>
                  <el-button
                    v-if="scope.row.order_state !== 203 && scope.row.order_state !== 200"
                    type="danger"
                    class="cancel"
                    size="mini"
                    @click="cancel(scope.row)"
                  >取消</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-dialog :visible.sync="showDetail" title="订单详情">
          <el-table :data="details" >
            <el-table-column prop="race" label="卡种"></el-table-column>
            <el-table-column prop="type" label="卡类"></el-table-column>
            <el-table-column prop="price" label="原价"></el-table-column>
            <el-table-column prop="priceNow" label="现价"></el-table-column>
            <el-table-column prop="num" label="数量"></el-table-column>
          </el-table>
        </el-dialog>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import adminHeader from "../../components/adminHeader";
export default {
  name: "orderAdmin",
  components: { adminHeader },
  data() {
    return {
      orders: [],
      showDetail:false,
      details:[],
      chartSettings: {
        // xAxisType: "time",
        // axisSite: {left: ["orderCount"]}, // left： 为左边要显示的数据，right：为右边要显示的数据。数据要一致。
        // labelMap: {orderCount: "订单数量"} // 订单数量前面的变量要和axisSite 里面的变量相对应，这样鼠标经过时才会显示 ‘订单数量’
      },
      countData: {
        // columns 里面放的是要展示的数据
        columns: ["dateTime","orderCount"],
        // 写入数据的地方
        rows: [
          { dateTime: "2018-11-01", orderCount: 10},
          { dateTime: "2018-11-02", orderCount: 30},
          { dateTime: "2018-11-03", orderCount: 50},
          { dateTime: "2018-11-05", orderCount: 80}]
      },
      loading: false,
      dataEmpty: false
    }
  },
  mounted() {
    this.getOrder();
  },
  methods: {
    getOrder() {
      this.axios
        .get("/api/admin/getOrder")
        .then((res) => {
          console.log(res.data);
          this.orders = res.data;

        })
        .catch((err) => {
          console.log(err);
        })
    },

    cancel(row) {
      console.log(row);
      this.axios
        .patch("/api/admin/delOrder", {
          pay_state: row.pay_state,
          id: row._id,
        })
        .then((res) => {
          console.log(res);
          this.getOrder();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    delivery(row) {
      console.log(row);
      this.axios
        .put("/api/admin/delivery", {
          id: row._id,
        })
        .then((res) => {
          console.log(res);
          this.getOrder();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    timer(row) {
      var moment = require("moment");
      if (row.time == undefined) {
        return "暂无数据";
      } else {
        var times = moment(row.time).format("YYYY-MM-DD HH:MM:SS");
        // var times = row.time.toLocaleString().replace(/:\d{1,2}$/,'nian');
        return times;
      }
    },
    refund(row) {
      console.log(row);
      this.axios.patch('/api/admin/refund',{
        id:row._id
      }).then(res=>{
        console.log(res);
        this.getOrder();
      }).catch(err=>{
        console.log(err)
      })
    },
    checkDetails(row){
      console.log(row);
      this.axios.get('/api/checkDetail',{
        params:{
          id:row._id
        }
      }).then(res=>{
        console.log(res);
        this.details = res.data.data;
        this.showDetail = true;
      }).catch(err=>{
        console.log(err)
      })
    },
  },
};
</script>

<style scoped>
</style>
